<script setup lang="ts">
import { defineProps, reactive, ref, watch } from "vue"
import { FormInst, NSelect, NModal, NForm, NFormItem, NInput, NInputNumber, NDatePicker, NTreeSelect } from "naive-ui"

const props = defineProps<{
  showModal: boolean
  modalSubmit: (data: any) => void
  modalClose: () => void
  handleUpdate: (data: any) => void
  editConfig: any
  dataList: any
}>()

const formRef = ref<FormInst | null>(null)
const formValue: any = reactive({
  data: <any>{
    couponRange: 1,
    couponType: 1,
    isLimitCount: 1,
    getTimeRange: null,
    useTimeRange: null
  }
})

const rules = {
  threshold: {
    required: true,
    message: "请输入使用门槛",
  },
  couponType: {
    required: true,
    message: "请选择制卷类型",
  },
  couponRange: {
    required: true,
    message: "请选择卷使用范围",
  },
  isLimitCount: {
    required: true,
    message: "请选择是否限制发卷数量",
  },
  limitCount: {
    required: true,
    message: "请输入总发放数量",
  },
  receiveCount: {
    required: true,
    message: "请输入用户可领取数",
  },
  isMutex: {
    required: true,
    message: "请选择是否为互斥卷",
  },
  getTimeRange: {
    required: true,
    message: "请选择时间",
  },
  useTimeRange: {
    required: true,
    message: "请选择时间",
  },
  batchName: {
    required: true,
    message: "请输入批次名称",
  },
  couponName: {
    required: true,
    message: "请输入卷名称",
  },
  couponTypeNeed: {
    required: true,
    message: "请选择或输入所需数据",
  },
  couponRangeNeed: {
    required: true,
    message: "请选择或输入所需数据",
  },
}
//弹窗确认
const modalOnOk = () => {
  formRef.value?.validate((errors) => {
    if (!errors) {
      props.modalSubmit({
        ruleId: props.editConfig.echoData.ruleId,
        ...formValue.data,
        receiveStarted: formValue.data.getTimeRange[0],
        receiveEnd: formValue.data.getTimeRange[1],
        useStated: formValue.data.useTimeRange[0],
        useEnd: formValue.data.useTimeRange[1],
      })

    } else {
      // console.log(formValue.data);
    }
  })
}
//弹窗关闭
const modalCancel = () => {
  props.modalClose()
  formValue.data = {
    couponRange: 1,
    couponType: 1,
    isLimitCount: 1,
    getTimeRange: null,
    useTimeRange: null
  }
}
//编辑分类的监听回调
watch(() => props.editConfig, (newValue, oldValue) => {
  if (newValue.isEdit === true) {
    // console.log(newValue.echoData);
    formValue.data = {
      ...newValue.echoData,
      getTimeRange: [newValue.echoData.receiveStarted, newValue.echoData.receiveEnd],
      useTimeRange: [newValue.echoData.useStated, newValue.echoData.useEnd]
    }
  }
}, {
  deep: true
});

</script>

<template>
  <div class="modal">
    <n-modal :show="props.showModal" preset="dialog" :title="props.editConfig.isEdit ? '编辑优惠卷' : '新增优惠卷'"
      positive-text="确认" negative-text="取消" @positive-click="modalOnOk" @negative-click="modalCancel" :show-icon="false"
      :on-close="modalCancel" :on-mask-click="modalCancel">
      <n-form label-width="130px" ref="formRef" label-placement="left" :model="formValue.data" :rules="rules">
        <n-form-item label="使用门槛:" path="threshold">
          <n-input-number class="form_item" min="0" v-model:value="formValue.data.threshold" placeholder="请填写使用门槛" />
        </n-form-item>
        <n-form-item label="制卷类型:" path="couponType">
          <n-select :options="props.dataList.couponTypeList" class="form_item" v-model:value="formValue.data.couponType"
            placeholder="请填写制卷类型" />
        </n-form-item>
        <n-form-item label="优惠卷范围:" path="couponRange">
          <n-select :options="props.dataList.couponRangeList" class="form_item" v-model:value="formValue.data.couponRange"
            placeholder="请选择优惠卷范围" />
        </n-form-item>
        <n-form-item label="是否限制发卷数量:" path="isLimitCount">
          <n-select :options="props.dataList.varList" class="form_item" v-model:value="formValue.data.isLimitCount"
            placeholder="是否限制发卷数量" />
        </n-form-item>
        <n-form-item v-if="formValue?.data?.isLimitCount === 0 ? false : true" label="总发放数量:" path="limitCount">
          <n-input-number class="form_item" min="0" v-model:value="formValue.data.limitCount" placeholder="请填写总发放数量" />
        </n-form-item>
        <n-form-item label="用户领取数量:" path="receiveCount">
          <n-input-number class="form_item" min="0" v-model:value="formValue.data.receiveCount" placeholder="请填写用户领取数量" />
        </n-form-item>
        <n-form-item label="是否互斥:" path="isMutex">
          <n-select :options="props.dataList.varList" class="form_item" v-model:value="formValue.data.isMutex"
            placeholder="是否互斥" />
        </n-form-item>
        <n-form-item label="领取时间范围:" path="getTimeRange">
          <n-date-picker v-model:formatted-value="formValue.data.getTimeRange" value-format="yyyy-MM-dd HH:mm"
            type="datetimerange" clearable />
        </n-form-item>
        <n-form-item label="使用时间范围:" path="useTimeRange">
          <n-date-picker v-model:formatted-value="formValue.data.useTimeRange" value-format="yyyy-MM-dd HH:mm"
            type="datetimerange" clearable />
        </n-form-item>
        <n-form-item label="批次名称:" path="batchName">
          <n-input class="form_item" v-model:value="formValue.data.batchName" placeholder="请填写批次名称" />
        </n-form-item>
        <n-form-item label="卷名称:" path="couponName">
          <n-input class="form_item" v-model:value="formValue.data.couponName" placeholder="请填写卷名称" />
        </n-form-item>
        <n-form-item label="制卷所需:" path="couponTypeNeed">
          <n-input-number v-if="formValue.data.couponType === 1 ? false : true" class="form_item"
            v-model:value="formValue.data.couponTypeNeed" placeholder="请填写制卷所需" :min="0"
            :max="formValue.data.couponType === 2 ? 1 : 999" :precision="2" />
          <n-tree-select v-if="formValue.data.couponType === 1 ? true : false" multiple class="form_item" filterable
            :options="props.dataList.productList" v-model:value="formValue.data.couponTypeNeed" placeholder="请选择制卷所需" />
        </n-form-item>
        <n-form-item v-if="formValue?.data?.couponRange === 1 ? false : true" label="使用范围所需:" path="couponRangeNeed">
          <n-tree-select multiple class="form_item" filterable
            :options="formValue.data.couponRange === 2 ? props.dataList.cateList : props.dataList.productList"
            v-model:value="formValue.data.couponRangeNeed" placeholder="请选择使用范围所需" />
        </n-form-item>
      </n-form>
    </n-modal>
  </div>
</template>

<style lang="scss" scoped>
.form_item {
  width: 180px;
}
</style>
